<template>
  <!-- <index :classify="'4'" /> -->
  <div>
    <div class="time_box_1">
      <el-button class="time_box_plus" @click.stop="plus" @touchstart.prevent="plus">+</el-button>
      <div class="time_box_number">
        {{ value }}
      </div>
      <el-button class="time_box_plus" @click.stop="minus" @touchstart.prevent="minus">-</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
  },
  data() {
    return {};
  },
  watch: {},
  created() { },
  mounted() { },
  methods: {
    plus() {
      const value = Number(this.value) + 1 > 9 ? 0 : Number(this.value) + 1;
      this.$emit('changeValue', value);
    },
    minus() {
      this.$emit('changeValue', Number(this.value) - 1);
    },
  },
};
</script>

<style lang="less" scoped>
.time_box_1 {
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .time_box_plus {
    width: 45px;
    height: 25px;
    background: rgba(255, 255, 255, 1);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    cursor: pointer;
  }

  .time_box_number {
    height: 80px;
    font-size: 80px;
    line-height: 80px;
    margin: 5px 0;
  }
}
</style>
